<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>053-沿着一个运动路径移动、旋转并缩放的文本+逐步放大并改变颜色的矩形</title>
</head>

<body>
    <p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
            <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
            <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
            <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" />
            <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" />
            <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s"
                fill="freeze" />
        </rect>
        <g transform="translate(100,100)">
            <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
                <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
                <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
                <animateColor attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s"
                    fill="freeze" />
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0"
                    begin="1s" dur="5s" fill="freeze" />
                <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3"
                    additive="sum" begin="1s" dur="5s" fill="freeze" />
            </text>
        </g>
    </svg>
</body>

</html>